<!--Copyright https://gitee.com/laiyw/monitor-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Monitor Memory</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">
    <!--面板-->
    <div class="row" style="margin-top: 10px;">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <table id="serverMemoryInfoTable" class="table">
                    <tr style="background-color: #428bca">
                        <td colspan="2">物理内存</td>
                        <td colspan="2">交换区内存</td>
                    </tr>
                    <tr>
                        <td>总内存</td>
                        <td></td>
                        <td>总内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>剩余内存</td>
                        <td></td>
                        <td>剩余内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td></td>
                        <td>已用内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td></td>
                        <td>使用率</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <table id="jvmMemoryInfoTable" class="table">
                    <tr style="background-color: #dff0d8">
                        <td>Java虚拟机</td>
                        <td style="text-align: right">
                            <button onclick="monitor.memory.gc()" class="btn btn-xs btn-danger" data-toggle="tooltip"
                                    title="执行垃圾回收,不建议使用，如有性能上的需求，可以对GC机制进行微调">回收/GC
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>总内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>剩余内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-md-5">
            <div class="panel panel-info">
                <table id="heapMemoryInfoTable" class="table">
                    <tr style="background-color: #d9edf7">
                        <td colspan="2">堆/heap</td>
                        <td colspan="2">非堆/nonheap</td>
                    </tr>
                    <tr>
                        <td>最大内存</td>
                        <td></td>
                        <td>最大内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>初始内存</td>
                        <td></td>
                        <td>初始内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>已用内存</td>
                        <td></td>
                        <td>已用内存</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>使用率</td>
                        <td></td>
                        <td>使用率</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
    <div style="font-size: 18px;">
        Java虚拟机内存详细使用情况
    </div>
    <!--表格-->
    <table id="heapMemoryPoolInfoTable" class="table table-hover"></table>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf8"></script>
<script src="js/common.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">
    $.namespace("monitor.memory");
    monitor.memory = function () {
        return {
            init: function () {
                this.initTable();
                monitor.common.buildHeadAndInitInterval(4, this.ajax);
            },
            ajax: function () {
                $.ajax({
                    type: 'POST',
                    url: 'memory.json',
                    dataType: "json",
                    success: function (data) {
                        monitor.memory.serverMemoryInfo(data['serverMemory']);
                        monitor.memory.jvmMemoryInfo(data['jvmMemory']);
                        monitor.memory.jvmHeapMemoryInfo(data['heapMemory']);
                        $('#heapMemoryPoolInfoTable').bootstrapTable('load', data['heapMemoryPool']);
                    }
                });
            },
            gc: function () {
                $.ajax({
                    type: 'POST',
                    url: 'gc.json',
                    dataType: "json",
                    success: function (data) {
                        alert("GC成功！");
                    }
                });
            },
            serverMemoryInfo: function (data) {
                var table = $("#serverMemoryInfoTable");
                table.find("tr:eq(1)").find("td:eq(1)").text(data.memTotal);
                table.find("tr:eq(1)").find("td:eq(3)").text(data.swapTotal);

                table.find("tr:eq(2)").find("td:eq(1)").text(data.memFree);
                table.find("tr:eq(2)").find("td:eq(3)").text(data.swapFree);

                table.find("tr:eq(3)").find("td:eq(1)").text(data.memUsed);
                table.find("tr:eq(3)").find("td:eq(3)").text(data.swapUsed);

                table.find("tr:eq(4)").find("td:eq(1)").text(data.memUsedPercent);
                table.find("tr:eq(4)").find("td:eq(3)").text(data.swapUsedPercent);
            },
            jvmMemoryInfo: function (data) {
                var table = $("#jvmMemoryInfoTable");
                table.find("tr:eq(1)").find("td:eq(1)").text(data.jvmTotal);

                table.find("tr:eq(2)").find("td:eq(1)").text(data.jvmFree);

                table.find("tr:eq(3)").find("td:eq(1)").text(data.jvmUsed);

                table.find("tr:eq(4)").find("td:eq(1)").text(data.usedPercent);
            },
            jvmHeapMemoryInfo: function (data) {
                var table = $("#heapMemoryInfoTable");
                table.find("tr:eq(1)").find("td:eq(1)").text(data.heapMax);
                table.find("tr:eq(1)").find("td:eq(3)").text(data.nonHeapMax);

                table.find("tr:eq(2)").find("td:eq(1)").text(data.heapInit);
                table.find("tr:eq(2)").find("td:eq(3)").text(data.nonHeapInit);

                table.find("tr:eq(3)").find("td:eq(1)").text(data.heapUsed);
                table.find("tr:eq(3)").find("td:eq(3)").text(data.nonHeapUsed);

                table.find("tr:eq(4)").find("td:eq(1)").text(data.heapAvailable);
                table.find("tr:eq(4)").find("td:eq(3)").text(data.nonHeapAvailable);
            },
            initTable: function () {
                $('#heapMemoryPoolInfoTable').bootstrapTable({
                    columns: [{
                        title: '#',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'name',
                        title: '内存名称'
                    }, {
                        field: 'type',
                        title: '内存类型'
                    }, {
                        field: 'managerNames',
                        title: 'Manager Names'
                    }, {
                        field: 'usageMax',
                        title: '最大内存'
                    }, {
                        field: 'usageInit',
                        title: '初始内存'
                    }, {
                        field: 'usageUsed',
                        title: '已用内存'
                    }, {
                        field: 'usageUsedPercent',
                        title: '使用率'
                    }],
                    data: []
                });
            }
        }
    }();

    $(document).ready(function () {
        monitor.memory.init();
    });
</script>
</body>
</html>